<template>
  <div class="">
    <ul class="personal-account-list">
      <li>
        <div class="personal-account-item personal-account-nickname">
          <!--用户昵称-->
          <p class="account-title">{{ $t('message.personalAccountNickNameTitle') }}</p>
          <!--已设置，当前用户昵称为-->
          <p class="account-content">{{ $t('message.personalAccountNickName') }}：{{ username }}</p>
        </div>
        <div class="personal-account-btn">
          <button type="button" v-if="username" @click="showDialog('changeUsername')">{{ $t('message.personalAccountEdit') }}</button>
          <button type="button" v-else>{{$t('message.personalAccountSet')}}</button>
        </div>
      </li>
      <li>
        <div class="personal-account-item personal-account-login-password">
          <!--登录密码-->
          <p class="account-title">{{ $t('message.personalAccountPasswordTitle') }}</p>
          <!--用于登陆和确保账号安全，建议您定期更换密码-->
          <p class="account-content">{{ $t('message.personalAccountPasswordDescribe') }}</p>
        </div>
        <div class="personal-account-btn">
          <button type="button" @click="showDialog('changeLoginPassword')">{{ $t('message.personalAccountEdit') }}</button>
        </div>
      </li>
      <li>
        <div class="personal-account-item personal-account-pay-password">
          <!--支付密码-->
          <p class="account-title">{{ $t('message.personalAccountPayPasswordTitle') }}</p>
          <!--支付订单时需要验证，确保资金安全--><!--当前尚未设置支付密码，无法确保你的资金安全--
          <!--<p class="account-content" v-if="isSetPayPassword">{{ $t('message.personalAccountPayPasswordDescribe') }}</p>
          <p class="error-tips" v-else>{{ $t('message.personalAccountPayPasswordWarning') }}</p>-->
          <!--功能暂未启用-->
          <p class="error-tips">{{ $t('message.personalAccountFeatureNotEnabled') }}</p>
        </div>
        <div class="personal-account-btn">
          <!--禁用的按钮-->
          <button type="button" style="cursor:not-allowed;color:#d7d7d7">{{$t('message.personalAccountSet')}}</button>
          <!--可用的按钮-->
          <!--修改--><!--立即设置-->
          <!--<button type="button" v-if="isSetPayPassword" @click="showDialog('changePayPassword')">{{$t('message.personalAccountEdit')}}</button>
          <button type="button" v-else @click="showDialog('setPayPassword')">{{$t('message.personalAccountSet')}}</button>-->
        </div>
      </li>
      <li>
        <div class="personal-account-item personal-account-email">
          <!--绑定邮箱-->
          <p class="account-title">{{ $t('message.personalAccountEmailTitle') }}</p>
          <!--当前已绑定邮箱为-->
          <p class="account-content">{{ $t('message.personalAccountEmailDescribe') }}：{{ email }}</p>
        </div>
        <!-- 暂时注释，不要删除 -->
         <div class="personal-account-btn">
          <!--修改-->
          <button type="button" v-if="email" @click="showDialog('setEmail')">{{$t('message.personalAccountEdit')}}</button>
          <!--立即设置-->
          <button type="button" v-else @click="showDialog('setEmail')">{{$t('message.personalAccountSet')}}</button>
        </div>
      </li>
      <li class="account-no-bottom">
        <div class="personal-account-item personal-account-phone">
          <!--绑定手机-->
          <p class="account-title">{{$t('message.personalAccountMobileTitle')}}</p>
          <!--当前已绑定手机为：-->
          <p class="account-content">{{$t('message.personalAccountMobileDescribe')}}：{{ phone }}</p>
        </div>
        <div class="personal-account-btn">
          <!--修改-->
          <button type="button" @click="showDialog('changePhone')">{{$t('message.personalAccountEdit')}}</button>
        </div>
      </li>
    </ul>
    <!--修改昵称弹出框-->
    <v-dialog v-if="showDialogType === 'changeUsername'">
      <personal-account-username :username="username" @change-val="changeUsername($event)" @close="hideDialog"></personal-account-username>
    </v-dialog>
    <!--修改登录密码弹出框-->
    <v-dialog v-if="showDialogType === 'changeLoginPassword'">
      <personal-account-login-password @change-val="changePassword" @close="hideDialog"></personal-account-login-password>
    </v-dialog>
    <!--设置支付密码弹出框-->
    <v-dialog v-if="showDialogType === 'setPayPassword'">
      <personal-account-set-pay-password :phone="phone" @change-val="setPayPassword" @close="hideDialog"></personal-account-set-pay-password>
    </v-dialog>
    <!--修改支付密码弹出框-->
    <v-dialog v-if="showDialogType === 'changePayPassword'">
      <personal-account-change-pay-password @change-val="changePayPassword" @close="hideDialog"></personal-account-change-pay-password>
    </v-dialog>
    <!--修改绑定邮箱-->
    <v-dialog v-if="showDialogType === 'setEmail'">
      <personal-account-email :phone="phone" :email="email" @new-email="defineNewEmail" @change-val="changeEmail" @close="hideDialog"></personal-account-email>
    </v-dialog>
    <!--修改绑定手机-->
    <v-dialog v-if="showDialogType === 'changePhone'">
      <personal-account-phone :phone="phone" @change-val="changePhone" @close="hideDialog"></personal-account-phone>
    </v-dialog>
  </div>
</template>

<script>
import VDialog from '@/components/base/VDialog'
import PersonalAccountUsername from '@/components/personal/account/PersonalAccountUsername'
import PersonalAccountLoginPassword from '@/components/personal/account/PersonalAccountLoginPassword'
import PersonalAccountSetPayPassword from '@/components/personal/account/PersonalAccountSetPayPassword'
import PersonalAccountChangePayPassword from '@/components/personal/account/PersonalAccountChangePayPassword'
import PersonalAccountPhone from '@/components/personal/account/PersonalAccountPhone'
import PersonalAccountEmail from '@/components/personal/account/PersonalAccountEmail'

export default {
  name: 'PersonalAccountSecurity',
  components: {
    VDialog,
    PersonalAccountUsername,
    PersonalAccountLoginPassword,
    PersonalAccountSetPayPassword,
    PersonalAccountChangePayPassword,
    PersonalAccountPhone,
    PersonalAccountEmail
  },
  data () {
    return {
      isSetPayPassword: false,
      showDialogType: '',
      username: '',
      phone: '',
      email: ''
    }
  },
  methods: {
    defineNewEmail (val) {
      this.email = val
    },
    getUserNewPhone (newPhone) {
      this.phone = newPhone
    },
    showDialog (val) {
      this.showDialogType = val
    },
    hideDialog () {
      this.showDialogType = ''
    },
    changeUsername (val) {
      this.username = val
      this.hideDialog()
    },
    changePassword () {
      this.hideDialog()
    },
    setPayPassword () {
      this.hideDialog()
    },
    changePayPassword () {
      this.hideDialog()
    },
    changeEmail () {
      this.hideDialog()
    },
    changePhone (val) {
      this.phone = val
    }
  },
  created () {
    this.$ajax.getUserInfo().then((res) => {
      if (res.code === 200) {
        this.username = res.data.user_name
        this.phone = res.data.mobile
        this.email = res.data.email
      } else if (res.code === 301) {
        this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
      }
    })
  },
  deactivated () {
    this.showDialogType = ''
  }
}
</script>

<style scoped>
.personal-account-list li {
  height: 134px;
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
  display: table;
}

.personal-account-item {
  display: table-cell;
  vertical-align: middle;
  padding-left: 72px;
}

.personal-account-item .account-title {
  height: 25px;
  line-height: 25px;
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

.personal-account-item .account-content {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #a5a5a5;
  margin-top: 8px;
}

.personal-account-item .error-tips {
  margin-top: 8px;
}

.personal-account-nickname {
  background: url(../../../assets/images/personal/account/icon_userName.png) no-repeat left center;
}

.personal-account-login-password {
  background: url(../../../assets/images/personal/account/icon_password.png) no-repeat left center;
}

.personal-account-pay-password {
  background: url(../../../assets/images/personal/account/icon_payPassword.png)no-repeat left center;
}

.personal-account-email {
  background: url(../../../assets/images/personal/account/icon_mail.png) no-repeat left center;
}

.personal-account-phone {
  background: url(../../../assets/images/personal/account/icon_phone.png) no-repeat left center;
}

.personal-account-btn {
  width: 100px;
  display: table-cell;
  vertical-align: middle;
}

.personal-account-btn button {
  width: 100px;
  height: 40px;
  border: 1px solid #d7d7d7;
  background-color: #fff;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}

.personal-account-list .account-no-bottom {
  border-bottom: 0;
}

.change-password {
  width: 496px;
}
</style>
